<template>
    <a-drawer :title="title" :width="500" @close="handleCancel" :visible="visible" :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
                      labelAlign="left"
        >
            <a-form-model-item label="关键字" prop="keyword" ref="keyword">
                <a-input allowClear :placeholder="placeholder.keyword" v-model="form.keyword" :disabled="isUpdate"/>
            </a-form-model-item>


            <a-form-model-item label="匹配方式" prop="matchType" ref="matchType">
                <a-radio-group v-model="form.matchType" button-style="solid">
                    <a-radio-button v-for="(item,index) in WxmpReplyMatchTypeOPT"
                                    :key="index" :value="item.value">{{item.label}}
                    </a-radio-button>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="回复类型" prop="contentType" ref="contentType">
                <a-radio-group v-model="form.contentType" button-style="solid" @change="changeRadio">
                    <a-radio-button v-for="(item,index) in WxmpReplyContentTypeOPT"
                                    :key="index" :value="item.value">{{item.label}}
                    </a-radio-button>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="触发事件">
                <a-row :gutter="16">
                    <a-col :span="20">
                        <a-select allowClear showSearch
                                  placeholder="设置触发回复内容的事件"
                                  v-model="form.event"
                                  option-filter-prop="children">
                            <a-select-option v-for="(item, index) in WxmpEventsOPT" :key="index" :value="item.value">
                                {{item.label }}
                            </a-select-option>

                        </a-select>
                    </a-col>
                    <a-col :span="4" class="text-center">
                        <a-tooltip title="当用户触发事件时,系统将自动调用关键字的回复内容进行消息推送。一个触发事件只能和一个关键字绑定">
                            <a-icon type="question-circle"/>
                        </a-tooltip>


                    </a-col>
                </a-row>


            </a-form-model-item>

            <a-form-model-item label="回复内容" prop="contentJson" ref="contentJson">
                <!-- 回复文字-->


                <FormText v-if="form.contentType==='text' || form.contentType===null  "
                          @callBack="(obj)=>{this.form.contentJson=JSON.stringify(obj)}"
                          :dataSource="dataSource"/>
                <!-- 回复图片-->
                <FormImage v-if="form.contentType==='image' "
                           @callBack="(obj)=>{this.form.contentJson=JSON.stringify(obj)}"
                           :dataSource="dataSource"/>
                <!--回复语音  -->
                <FormVoice v-if="form.contentType==='voice' "
                           @callBack="(obj)=>{this.form.contentJson=JSON.stringify(obj)}"
                           :dataSource="dataSource"/>
                <!--回复视频文件  -->
                <FormVideo v-if="form.contentType==='video' "
                           @callBack="(obj)=>{this.form.contentJson=JSON.stringify(obj)}"
                           :dataSource="dataSource"/>
                <FormNews v-if="form.contentType==='news' "
                          @callBack="(obj)=>{this.form.contentJson=JSON.stringify(obj)}"
                          :dataSource="dataSource"/>
            </a-form-model-item>
        </a-form-model>
        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </footer>
    </a-drawer>
</template>
<script>
    import {replyAdd, replyUpdate} from '../public/http.js';
    import {dictLoad} from '../../../../util/internal.api';

    export default {
        props: ['editRecord'],
        components: {
            FormText: () => import('./component/FormText'),
            FormImage: () => import('./component/FormImage'),
            FormVoice: () => import('./component/FormVoice'),
            FormVideo: () => import('./component/FormVideo'),
            FormNews: () => import('./component/FormNews'),
        },
        data() {
            return {
                none: null,
                isUpdate: false, //是否是更新模式
                loading: false, //按钮Loading
                title: '添加回复',
                visible: true, //modal 显示状态
                labelCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 5
                    }
                },
                wrapperCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 19
                    }
                },
                groupmatchTypeOPT: [], //分组属性字段选项
                placeholder: {
                    keyword: '关键字',
                    matchType: '匹配方式',
                    contentType: '回复类型',
                    contentJson: '回复内容'
                },
                form: {
                    keyword: null,
                    matchType: null,
                    event: undefined,
                    contentType: 'text',
                    contentJson: null,
                },
                rules: {
                    keyword: [
                        {
                            required: true,
                            message: '请设置回复的关键字',
                            trigger: 'blur'
                        },
                        {
                            max: 20,
                            message: '回复关键字最多设置20个字符',
                            trigger: 'blur'
                        },
                    ],
                    matchType: {
                        required: true,
                        message: '请选自关键字匹配方式',
                        trigger: 'blur'
                    },
                    contentType: {
                        required: true,
                        message: '请选择回复内容的类型',
                        trigger: 'blur'
                    },
                    contentJson: {
                        required: true,
                        message: '请设置回复内容',
                        trigger: 'blur'
                    },
                },
                WxmpReplyMatchTypeOPT: [],
                WxmpReplyContentTypeOPT: [],
                WxmpEventsOPT: [],
            };
        },
        methods: {
            changeRadio(e) {
                if (this.editRecord.contentType !== e.target.value) {
                    this.form.contentJson = null;

                } else {
                    this.form.contentJson = this.editRecord.contentJson;
                }
            },
            //表单提交事件e
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        let data = {...this.form}
                        if (this.isUpdate) {
                            replyUpdate(data.id, data).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.visible = false;
                                    this.$emit('closeFun', {render: true});
                                }
                                this.loading = false;
                            });
                        } else {
                            replyAdd(data).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.visible = false;
                                    this.$emit('closeFun', {render: true});
                                }
                                this.loading = false;
                            });
                        }
                    }
                });
            },
            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeFun', {
                    render: false
                });
            },
            //表单初始化
            fromVal() {
                let obj = {...this.editRecord};
                if (obj.id) {
                    this.form = obj;
                    this.isUpdate = true;
                    this.title = '编辑回复';
                }
            },
            //数据初始化
            async init() {
                await dictLoad('WxmpReplyMatchType').then(res => (this.WxmpReplyMatchTypeOPT = res));
                await dictLoad('WxmpReplyContentType').then(res => (this.WxmpReplyContentTypeOPT = res));
                await dictLoad('WxmpEvents').then(res => (this.WxmpEventsOPT = res));


                this.fromVal();
            }
        },
        computed: {
            dataSource() {
                if (this.form.contentJson === null) {
                    return {};
                } else {
                    //将字符串转换为JSON
                    return JSON.parse(this.form.contentJson);
                }
            }


        },
        created() {
            this.init();
        }
    };
</script>

